<template>
	<view>
		<uni-nav-bar statusBar :border='false' color="#fff" fixed :backgroundColor='backgroundColor'>
			<block slot="left">
				<view class="flex-row-flex-start">
					<image class="logo" src="/static/common/logo.png" mode=""></image>
					<view class="topTitle">
						通勤车
					</view>

				</view>
			</block>
		</uni-nav-bar>
		<view class="topView">
			<picker mode="date" fields='month' :value="day" @change="bindDateChange">
				<view class="screeningView flex-row-flex-start" style="margin-left: 30rpx;">
					<view class="screening" style="margin-right: 6rpx;">
						{{create_month}}
					</view>
					<u-icon name="arrow-down-fill" color="#333333" size="14"></u-icon>
				</view>
			</picker>
			<view v-for="(item,index) in list" :key="index">
				<view class="item ">
					<view class="time">
						{{item.create_time}}
					</view>
					<view class="line" style="margin-top: 30rpx;">

					</view>
					<view class="flex-row-space-between" style="margin-top: 30rpx;">
						<view class="left">
							上车车辆
						</view>
						<view class="right">
							{{item.plate_number}}
						</view>
					</view>
					<view class="flex-row-space-between" style="margin-top: 30rpx;">
						<view class="left">
							上车地点
						</view>
						<view class="right">
							{{item.sign_address}}
						</view>
					</view>
					<view class="flex-row-space-between" style="margin-top: 30rpx;">
						<view class="left">
							上车时间
						</view>
						<view class="right">
							{{item.create_time}}
						</view>
					</view>
				</view>
			</view>
			<view class="" style="height: 300rpx;">

			</view>
		</view>



	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		signList,
		driverSignList,
	} from '@/api/index.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				create_month:'',
				userinfo: {},
				list: [],
				title: "",
				backgroundColor: 'ffffff00',
				list: [],
				data: {}

			}
		},
		computed: {
			...mapState([
				'baseColor'
			]),
		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#AED0FC"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo')
			this.loadData()
		},
		onLoad(e) {
			this.create_month=this.getCurrentDate()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			// if (e.scrollTop > 20) {
			// 	this.backgroundColor = "#FBF9FF"
			// } else {
			// 	this.backgroundColor = "#ffffff00"
			// }
		},
		methods: {
			bindDateChange(e){
				console.log(e)
				this.create_month=e.detail.value
				this.loadData()
			},
			getCurrentDate() {
			    const now = new Date();
			    const year = now.getFullYear();
			    const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1
			    const day = String(now.getDate()).padStart(2, '0');
			    
			    return `${year}-${month}`;
			},
			loadData() {

				var data = {
					page: 1,
					page_size: 999,
					create_month:this.create_month
				}
				var url = signList
				if (this.userinfo.group_id == 3) {
					url = driverSignList
				}
				url(data).then(res => {
					this.list = res.data.data
				})
			},


		}
	}
</script>

<style lang="scss">
	.item {
		margin: 32rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.time {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}

	.left {
		font-weight: 500;
		font-size: 28rpx;
		color: #777777;
	}

	.right {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
	}
</style>